import Vue from "vue";
import VueRouter from "vue-router";

Vue.use(VueRouter);

// const routes = [
//   {
//     path: "/",
//     name: "home",
//     component: HomeView,
//   },
//   {
//     path: "/about",
//     name: "about",

//     component: () =>
//       import(/* webpackChunkName: "AboutView" */ "../views/AboutView.vue"),
//   },
//   {
//     path: "/flexible",
//     name: "flexible",

//     component: () =>
//       import(/* webpackChunkName: "Flexible" */ "../views/Flexible.vue"),
//   },
//   {
//     path: "/upload",
//     name: "upload",

//     component: () =>
//       import(/* webpackChunkName: "upload" */ "../views/upload.vue"),
//   },
//   {
//     path: "/vueIntrojs",
//     name: "VueIntrojs",

//     component: () =>
//       import(/* webpackChunkName: "VueIntrojs" */ "../views/VueIntrojs.vue"),
//   },
//   {
//     path: "/form",
//     name: "form",

//     component: () => import(/* webpackChunkName: "form" */ "../views/form.vue"),
//   },
//   {
//     path: "/jsAsyncPool",
//     name: "jsAsyncPool",

//     component: () =>
//       import(/* webpackChunkName: "jsAsyncPool" */ "../views/jsAsyncPool.vue"),
//   },
//   {
//     path: "/tree",
//     name: "tree",

//     component: () => import(/* webpackChunkName: "tree" */ "../views/tree.vue"),
//   },
//   {
//     path: "/time",
//     name: "time",

//     component: () => import(/* webpackChunkName: "time" */ "../views/time.vue"),
//   },
//   {
//     path: "/echarts",
//     name: "echarts",

//     component: () =>
//       import(/* webpackChunkName: "echarts" */ "../views/echarts.vue"),
//   },
//   {
//     path: "/SqlTools",
//     name: "SqlTools",

//     component: () =>
//       import(/* webpackChunkName: "echarts" */ "../views/SqlTools.vue"),
//   },
//   {
//     path: "/Directives",
//     name: "Directives",

//     component: () =>
//       import(/* webpackChunkName: "echarts" */ "../views/Directives.vue"),
//   },
//   {
//     path: "/selectAll",
//     name: "selectAll",

//     component: () =>
//       import(/* webpackChunkName: "echarts" */ "../views/select-all.vue"),
//   },
//   {
//     path: "/CacheFile",
//     name: "CacheFile",

//     component: () =>
//       import(/* webpackChunkName: "echarts" */ "../views/CacheFile.vue"),
//   },
// ];

let siteRoutes = [];
function importAll(r) {
  //r 参数自带两个处理属性一个keys 一个是resolve 这里用的keys 具体看官网APi: context module API
  r.keys().forEach((key) => {
    let path = key.split(".")[1]; //key 就是带了./的文件名 比如我这里打印出来是./About ./Home ./Test 这样你就懂path 和name为什么这样写
    path.indexOf("Home") > -1 ? (path = "/") : ""; // home页面会被解析为/home，/ 访问为空白，所以做个判断path转为 / 。
    siteRoutes.push({
      path: path,
      name: path.substring(1),
      component: () => r(key),
    });
  });
}

importAll(require.context("../views/", false, /\.vue$/, "lazy")); // 第二个参数指是否使用子目录 第四个参数是指是否异步 lazy/sync

const routes = [...siteRoutes];

const router = new VueRouter({
  routes,
});

export default router;
